<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{width: 160px;height: 260px;border: solid 1px #aaa;border-radius: 6px;padding: 20px;margin: 0;display: none;position: absolute;left: 0;top:0;}
        ul li{line-height: 30px;list-style: none};
        
    </style>
</head>
<body>
    <ul>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
        <li>link4</li>
    </ul>
</body>
<script>

    var oul = document.querySelector("ul")

    // 自定义右键菜单
    document.oncontextmenu = function(eve){
        var e = eve ? eve : window.event;
        // 取消默认的右键菜单
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
        // 显示自定义的右键菜单
        oul.style.display = "block";
        // 设置自定义菜单的位置为鼠标的位置
        oul.style.left = e.pageX + "px";
        oul.style.top = e.pageY + "px";
    }

    document.onclick = function(){
        // 左键点击页面，自定义菜单消失
        oul.style.display = "none"
    }
</script>
</html>